<script setup>
import { computed } from 'vue'
const minTick = 10 // 最小刻度高度
const maxTick = 18
const props = defineProps({
  ticks: {
    type: Number,
    default: 100
  },
  tickSpacing: {
    type: Number,
    default: 5
  },
  minSize: {
    type: Number,
    default: 10
  },
  direction: {
    type: String,
    default: 'vertical' // 可选 'horizontal' 或 'vertical'
  }
})

const emits = defineEmits(['click'])

const ticksArray = computed(() => {
  return Array.from({ length: Math.ceil(props.ticks / props.minSize) })
})

const tickStyle = (i) => {
  const size = i % props.tickSpacing === 0 ? `${maxTick}px` : `${minTick}px`
  return props.direction === 'horizontal' ? { height: size } : { width: size }
}

const onClick = (i) => {
  emits('click', {
    num: i,
    direction: props.direction
  })
}
</script>

<template>
  <div :class="`ruler-sketch-${props.direction}`">
    <div
      v-for="(tick, i) in ticksArray"
      :key="i"
      @click="onClick(i)"
      class="ruler-sketch-tick"
      :style="tickStyle(i)"
    >
      <span
        v-if="i % props.tickSpacing === 0"
        class="ruler-sketch-tick-label"
      >
        {{ i * props.minSize }}
      </span>
    </div>
  </div>
</template>

<style lang="less">
@color: var(--color-neutral-8);
@lineSize: 24px;
.ruler-sketch-horizontal,
.ruler-sketch-vertical {
  user-select: none;
  position: relative;
  display: flex;
  .ruler-sketch-tick {
    background-color: @color;
    position: relative;
    display: flex;
    align-items: center;
  }
  .ruler-sketch-tick-label {
    position: absolute;
    color: @color;
  }
}

.ruler-sketch-horizontal {
  width: 100%;
  height: @lineSize;
  justify-content: space-between;
  align-items: end;
  border-bottom: 2px solid @color;

  .ruler-sketch-tick {
    width: 2px;
  }

  .ruler-sketch-tick-label {
    top: -20px;
    left: -10px;
  }
}

.ruler-sketch-vertical {
  width: @lineSize;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  border-right: 2px solid @color;

  .ruler-sketch-tick {
    height: 2px;
  }

  .ruler-sketch-tick-label {
    left: -28px;
  }
}
</style>
